<template>
  <el-dialog v-model="visible" title="商品详情" width="800px" @update:visible="val => emit('update:visible', val)">
    <el-card v-if="product">
      <div class="header">
        <el-image :src="product.mainImage" fit="cover" class="main-image" />
        <div class="info">
          <h2>{{ product.name }}</h2>
          <div>商品编号：{{ product.code }}</div>
          <div>分类：{{ product.category }}</div>
          <div>品牌：{{ product.brand }}</div>
          <div>价格：<span class="price">￥{{ product.price }}</span></div>
        </div>
      </div>
      <el-divider>商品图片</el-divider>
      <el-carousel height="240px" v-if="product.images && product.images.length > 0">
        <el-carousel-item v-for="(img, idx) in product.images" :key="idx">
          <el-image :src="img" fit="contain" style="width:100%;height:100%;" />
        </el-carousel-item>
      </el-carousel>
      <el-empty v-else description="暂无图片" />
      <el-divider>商品规格/属性</el-divider>
      <el-table :data="product.skus" border v-if="product.skus && product.skus.length > 0">
        <el-table-column prop="skuCode" label="SKU编码" width="120" />
        <el-table-column prop="spec" label="规格" />
        <el-table-column prop="price" label="价格" width="100" />
        <el-table-column prop="stock" label="库存" width="100" />
      </el-table>
      <el-empty v-else description="暂无规格" />
      <el-divider>商品描述</el-divider>
      <el-card class="desc-card">
        <div v-html="product.desc"></div>
      </el-card>
    </el-card>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue'

const props = defineProps<{
  product: any,
  visible: boolean
}>()
const emit = defineEmits(['update:visible'])

const visible = ref(props.visible)
watch(() => props.visible, (val) => {
  visible.value = val
})
watch(visible, (val) => {
  emit('update:visible', val)
})
</script>

<style scoped>
.header {
  display: flex;
  gap: 32px;
  margin-bottom: 24px;
}
.main-image {
  width: 160px;
  height: 160px;
  border-radius: 8px;
  border: 1px solid #eee;
  object-fit: cover;
}
.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.price {
  color: #e4393c;
  font-weight: bold;
  font-size: 18px;
}
.desc-card {
  margin-top: 12px;
  background: #fafbfc;
}
</style>